import {
    ref,
    onMounted,
    onUnmounted,
    computed
} from 'vue'
import axios from "axios";

export default function getData() { //todoLists
    let todoLists = ref([])
    let todoTitle = ref('')

    const gettolist = () => {
        axios({
            method: "get",
            url: "/gettolist",
        })
            .then((res) => {
                let list = res.data.result
                for (var i = 0; i < res.data.result.length; i++) {
                    if (list[i].completed == 1) {
                        list[i].completed = true
                    } else {
                        list[i].completed = false
                    }
                }
                todoLists.value = list
            })
            .catch((err) => {
                console.log(err);
            });
    }
    onMounted(() => {
        gettolist()
    })

    let tabList = computed(() => {
        console.log(todoLists)
        const activeTodoList = todoLists.value.filter(it => !it.completed);

        const finishedTodoList = todoLists.value.filter(it => it.completed);

        const activeBadge = activeTodoList.length == 0 ? '' : activeTodoList.length

        const completeBadge = finishedTodoList.length == 0 ? '' : finishedTodoList.length
        const activeTab = {
            badge: activeBadge,
            title: "正在进行",
            datalist: activeTodoList,
            todoLists: todoLists.value
        }
        const compleTab = {
            badge: completeBadge,
            title: "已经完成",
            datalist: finishedTodoList,
            todoLists: todoLists.value
        }
        const data = []
        data.push(activeTab)
        data.push(compleTab)
        return data
    });


    return {
        todoLists,
        todoTitle,
        tabList,
        gettolist
    }

}